<template>
  <div>
    <EmptyStatus
      v-if="!arrangedData || arrangedData.length == 0"
      modelName=""
    />
    <div v-else>
      <div class="command-bar" v-if="config != null">
        <!-- <el-checkbox
          v-model="config.showAdvise"
          label="显示建议"
          size="small"
          @change="chartRefresh()"
        /> -->

        <el-radio-group
          v-model="config.tagGroup"
          size="small"
          @change="chartRefresh()"
        >
          <el-radio :value="'auto'">
            <span>自动</span>
            <span v-if="config.tagGroup == 'auto'"
              >({{ sourceData.tagGroupName }})</span
            >
          </el-radio>
          <el-radio :value="'0203'">02+03</el-radio>
          <el-radio :value="'0213'">02+13</el-radio>
          <el-radio :value="'0313'">03+13</el-radio>
          <el-radio :value="'020313'">02+03+13</el-radio>
        </el-radio-group>
        <div>
          <el-checkbox
            v-model="config.showTotal"
            label="显示合计"
            size="small"
            @change="chartRefresh()"
          />
          <el-checkbox
            v-model="config.showTB"
            label="天府BOKIR离场提示"
            size="small"
            @change="chartRefresh()"
          />
        </div>
        <!-- <el-divider
          direction="vertical"
          style="margin-left: 24px; margin-right: 24px"
        />
        <el-radio-group
          v-model="config.modeSelect"
          size="small"
          @change="chartRefresh()"
        >
          <el-radio :value="'auto'">
            <span>自动</span>
            <span v-if="config.modeSelect == 'auto'"
              >({{ sourceData.opMode }})</span
            >
          </el-radio>
          <el-radio :value="'NN'">NN</el-radio>
          <el-radio :value="'NNWJ'">NNWJ</el-radio>
          <el-radio :value="'SS'">SS</el-radio>
          <el-radio :value="'SSWJ'">SSWJ</el-radio>
        </el-radio-group> -->
      </div>
      <transition name="el-fade-in" mode="out-in">
        <el-scrollbar
          v-if="showChart && config"
          @scroll="handleScroll"
          ref="scrollbar"
          @wheel="handleMouseWheel"
        >
          <v-chart
            :style="{
              margin: '24px',
              width: chartWidth + 'px',
              height: chartHeight + 'px',
            }"
            :option="chartOption"
            ref="chart"
            @click="handleChartClick"
          />
          <!-- :init-options="{ width: chartWidth, height: chartHeight }" -->
        </el-scrollbar>
      </transition>
      <!-- <pre>{{ sourceData }}</pre> -->
      <!-- <pre>{{ arrangedData }}</pre> -->
      <!-- <pre>{{ chartOption }}</pre> -->
      <!-- <pre>{{ arrangeedDataLite }}</pre> -->
    </div>
  </div>
</template>

<script setup>
// import echarts
import * as echarts from "echarts/core";
import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
import { BarChart, LineChart } from "echarts/charts";
import {
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";

// import vue echarts
import VChart, { THEME_KEY } from "vue-echarts";

// import vue apis
import { ref, computed, nextTick, watch, onMounted, onUnmounted, h } from "vue";

// import stores
import useFlowStore from "@/store/flow.js";
import useCommonStore from "@/store/common.js";
import useSeatStore from "@/store/seat.js";
import useActivityStore from "@/store/activity.js";

// import { cumulate, arrange, policyCompute } from "../utils";
import arrangeData from "./arrangeData.js";
import fetchTB from "./fetchTB.js";

import dayjs from "dayjs";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";

// empty
import EmptyStatus from "../../EmptyStatus/index.vue";

echarts.use([
  CanvasRenderer,
  // SVGRenderer,
  BarChart,
  LineChart,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LabelLayout,
  UniversalTransition,
]);

const flowStore = useFlowStore();
const commonStore = useCommonStore();
const activityStore = useActivityStore();
const seatStore = useSeatStore();

// chart setting
const chart = ref();
const showChart = ref(true);
const config = ref();

const sourceData = computed(() => {
  let opMode =
    config.value == null || config.value.modeSelect == "auto"
      ? activityStore.opMode
      : // seatStore.seatStatusFull.filter(
        //     (cell) => cell.seatType == "运行方向"
        //   )[0].logicSectorCode +
        //   (activityStore.militaryStatus.filter((cell) =>
        //     (cell.arrField + cell.depField + cell.unit).includes("温江")
        //   ).length > 0
        //     ? "WJ"
        //     : "")
        config.value.modeSelect;
  // let opMode = "NN";

  // get auto tagGroup
  let tagGroup = "0203";
  let tagGroupName = "02+03";
  if (config.value && config.value.tagGroup) {
    if (config.value.tagGroup != "auto") {
      tagGroup = config.value.tagGroup;
    } else {
      let tmaSeats = seatStore.seatStatus.filter(
        (cell) => cell.sectorYes && cell.orgGroup == "TMA"
      );
      for (let i = 0; i < tmaSeats.length; i++) {
        let cell = tmaSeats[i];
        if (
          cell.sectorCodes.includes("AP02") &&
          cell.sectorCodes.includes("AP03")
        ) {
          tagGroup = "0203";
          tagGroupName = "02+03";
          break;
        }
        if (
          cell.sectorCodes.includes("AP02") &&
          cell.sectorCodes.includes("AP13")
        ) {
          tagGroup = "0213";
          tagGroupName = "02+13";
          break;
        }
        if (
          cell.sectorCodes.includes("AP03") &&
          cell.sectorCodes.includes("AP13")
        ) {
          tagGroup = "0313";
          tagGroupName = "03+13";
          break;
        }
        if (
          cell.sectorCodes.includes("AP02") &&
          cell.sectorCodes.includes("AP03") &&
          cell.sectorCodes.includes("AP13")
        ) {
          tagGroup = "020313";
          tagGroupName = "02+03+13";
          break;
        }
      }
    }
  }

  return {
    tags: flowStore.tags,
    rawData: flowStore.rawData,
    begTime: flowStore.begTime,
    opMode,
    tagGroup,
    tagGroupName,
  };
});

const arrangedData = computed(() => {
  if (!flowStore.rawData || flowStore.rawData.length == 0) {
    return [];
  }
  return arrangeData(sourceData.value);
});

const arrangeedDataLite = computed(() =>
  arrangedData.value.map((item) => ({
    moment: item.day.format("HHmm"),
    valArr: item.valArr,
    valDep: item.valDep,
    isolate: item.isolate,
    opMode: item.opMode,
  }))
);

const chartForeColor = computed(() => (commonStore.darkMode ? "#fff" : "#000"));

const arrangedDataTB = computed(() => fetchTB(arrangedData.value));

const chartOption = computed(() => {
  const src = arrangedData.value.slice(5, arrangedData.value.length);
  const dataTB = arrangedDataTB.value.slice(5, arrangedDataTB.value.length);
  const valArrList = src.map((item) => ({
    value: item.valArr,
    itemStyle: { opacity: item.valArr == 0 ? 0 : 1 },
  }));
  const valDepList = src.map((item) => ({
    value: item.valDep,
    itemStyle: { opacity: item.valDep == 0 ? 0 : 1 },
  }));
  const valAllList = src.map((item) => ({
    value: item.valAll,
    itemStyle: { opacity: item.valAll == 0 ? 0 : 1 },
  }));

  const valDepMainMYList = src.map((item) => ({
    value: item.valDepMainMY,
    itemStyle: { opacity: item.valDepMainMY == 0 ? 0 : 1 },
  }));

  const valDepMiscMYList = src.map((item) => ({
    value: item.valDepMiscMY,
    itemStyle: { opacity: item.valDepMiscMY == 0 ? 0 : 1 },
  }));

  const valArrMYList = src.map((item) => ({
    value: item.valArrMY,
    itemStyle: { opacity: item.valArrMY == 0 ? 0 : 1 },
  }));

  const valPassList = src.map((item) => ({
    value: item.valPass,
    itemStyle: { opacity: item.valPass == 0 ? 0 : 1 },
  }));

  const adviceList = src.map((item) => (item.isolate ? "拆分" : "合并"));
  const momentList = src.map((item) => {
    let diff = dayjs().diff(item.day, "minute");
    let passed = diff < 0 ? 1 : diff > 30 ? -1 : 0;
    return {
      // value: `${item.day.format("HHmm")}\n至\n${item.day
      //   .add(30, "minute")
      //   .format("HHmm")}`,
      value: item.day.format("HHmm") + " +30",
      textStyle: {
        color:
          passed === 1
            ? commonStore.darkMode
              ? "#DDD"
              : "#333"
            : passed === 0
            ? commonStore.darkMode
              ? "#000"
              : "#FFF"
            : commonStore.darkMode
            ? "#666"
            : "#AAA",
        fontWeight: passed === 0 ? "bold" : "normal",
        opacity: passed === 0 ? 1 : 0.9,
        overflow: "break",
        // borderWidth: passed === 0 ? 1 : 0,
        // borderColor: commonStore.darkMode ? "#ff6767" : "#775845",
        borderRadius: 6,
        padding: [3, 4, 1, 4],
        backgroundColor:
          passed === 0
            ? commonStore.darkMode
              ? "#ff6767"
              : "#775845"
            : "transparent",
      },
    };
  });

  return {
    grid: {
      x: 30,
      y: 30,
      x2: 40,
      y2: 30,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: { type: "cross" },
    },
    // legend: {
    //   orient: "horizontal",
    //   left: scrollPotition.value.left + 60,
    //   top: 0,
    //   data: ["离场", "进场", "建议"], // "合计",
    //   textStyle: {
    //     color: commonStore.darkMode
    //       ? "rgba(255,255,255,0.5)"
    //       : "rgba(0,0,0,0.3)",
    //   },
    // },
    xAxis: { type: "category", data: momentList },
    yAxis: [
      {
        id: 0,
        type: "value",
        name: "架次",
        position: "left",
        axisLine: { show: true },
        // boundaryGap: false,
      },
      {
        id: 1,
        type: "category",
        name: "建议",
        position: "right",
        axisLine: { show: true },
        splitLine: { show: false },
        axisLabel: { show: true },
        data: ["合并", "拆分"],
      },
      {
        id: 2,
        type: "value",
        name: "提醒",
        min: 0,
        max: 1,
        position: "right",
        axisLine: { show: false },
        splitLine: { show: false },
        // boundaryGap: false,
      },
    ],
    series: [
      config.value.showAdvise
        ? {
            name: "建议",
            data: adviceList,
            type: "line",
            step: true,
            yAxisIndex: 1,
            polarIndex: 1,
            coordinateSystem: "cartesian2d",
            emphasis: config.value.emphasis,
            label: {
              show: true,
              color: chartForeColor.value,
              fontSize: "10px",
              fontWeight: "bold",
              formatter: (item) => item.value,
              distance: 10,
              offset: [15, 0],
              rotate: 45,
              backgroundColor: commonStore.darkMode ? "#0008" : "#fff8",
              borderColor: commonStore.darkMode ? "#fff" : "#000",
              borderWidth: 1,
              borderRadius: 10,
              padding: [4, 5, 3, 4],
            },
            lineStyle: {
              width: config.value.lineWidth,
              opacity: 0.5,
              color: commonStore.darkMode ? "#ff6767" : "#775845",
            },
            itemStyle: {
              // opacity: 0.75,
              color: commonStore.darkMode ? "#ff6767" : "#775845",
            },
            symbol: "circle",
            symbolSize: config.value.lineSymbolSize,
            animationDelay: function (idx) {
              return idx * 50 + 100;
            },
          }
        : null,
      config.value.showTotal
        ? {
            name: "合计",
            data: valAllList,
            type: "line",
            xAxisIndex: 0,
            yAxisIndex: 0,
            coordinateSystem: "cartesian2d",
            // step: true,
            smooth: config.value.smooth,
            emphasis: config.value.emphasis,
            label: {
              show: true,
              color: commonStore.darkMode ? "#000" : "#FFF",
              textBorderColor: commonStore.darkMode ? "#fff" : "#000",
              textBorderWidth: 2,
              fontSize: "16px",
              fontWeight: "bold",
              distance: 6,
            },
            tooltip: { valueFormatter: (value, index) => value + "架/0.5H" },
            lineStyle: {
              opacity: 0.5,
              width: config.value.lineWidth,
              color: commonStore.darkMode ? "#fff6" : "#0006",
            },
            itemStyle: {
              // opacity: 0.75,
              color: commonStore.darkMode ? "#fff8" : "#0008",
            },
            symbol: "circle",
            symbolSize: config.value.lineSymbolSize,
            animationDelay: function (idx) {
              return idx * 50 + 100;
            },
          }
        : null,
      {
        name: "双流天府离场",
        data: valDepList,
        type: "bar",
        coordinateSystem: "cartesian2d",
        xAxisIndex: 0,
        yAxisIndex: 0,
        stack: "x",
        barMinHeight: 20,
        smooth: config.value.smooth,
        emphasis: config.value.emphasis,
        label: {
          show: true,
          formatter: (item) => (item.value == 0 ? "" : item.value),
          color: commonStore.darkMode ? "#fff" : "#000",
          textBorderColor: commonStore.darkMode ? "#0006" : "#fff8",
          textBorderWidth: 1,
          textShadowColor: commonStore.darkMode ? "#000" : "#fff",
          textShadowBlur: 4,
          textShadowOffsetY: 1,
          fontSize: "14px",
          fontWeight: "bold",
          // distance: 12,
        },
        tooltip: { valueFormatter: (value, index) => value + "架/0.5H" },
        lineStyle: {
          color: commonStore.darkMode
            ? "rgba(255,255,255,0.5)"
            : "rgba(0,0,0,0.3)",
          type: "dotted",
          opacity: 1,
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: commonStore.darkMode ? "#60BD93" : "#60BD93",
            },
            {
              offset: 1,
              color: commonStore.darkMode ? "#2AA56D" : "#2AA56D",
            },
          ]),
          borderRadius: 10,
          borderColor: commonStore.darkMode
            ? "rgba(255,255,255,0.5)"
            : "rgba(0,0,0,0.3)",
          borderWidth: 2,
        },
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
      },
      {
        name: "双流天府进场",
        data: valArrList,
        type: "bar",
        coordinateSystem: "cartesian2d",
        yAxisIndex: 0,
        yAxisIndex: 0,
        stack: "x",
        barMinHeight: 20,
        smooth: config.value.smooth,
        emphasis: config.value.emphasis,
        label: {
          show: true,
          formatter: (item) => (item.value == 0 ? "" : item.value),
          color: commonStore.darkMode ? "#fff" : "#000",
          textBorderColor: commonStore.darkMode ? "#0006" : "#fff8",
          textBorderWidth: 1,
          textShadowColor: commonStore.darkMode ? "#000" : "#fff",
          textShadowBlur: 4,
          textShadowOffsetY: 1,
          fontSize: "14px",
          fontWeight: "bold",
          // distance: 12,
        },
        tooltip: { valueFormatter: (value, index) => value + "架/0.5H" },
        lineStyle: {
          color: commonStore.darkMode
            ? "rgba(255,255,255,0.5)"
            : "rgba(0,0,0,0.3)",
          type: "dotted",
          opacity: 1,
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: commonStore.darkMode ? "#EAC76F" : "#EAC76F",
            },
            {
              offset: 1,
              color: commonStore.darkMode ? "#CCA033" : "#CCA033",
            },
          ]),
          borderRadius: 10,
          borderColor: commonStore.darkMode
            ? "rgba(255,255,255,0.5)"
            : "rgba(0,0,0,0.3)",
          borderWidth: 2,
        },
        // barWidth: 50,
        // barGap: 0,
        // barCategoryGap: 0,
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
        barWidth: 60,
        barGap: 0,
        barCategoryGap: 0,
      },
      {
        name: "绵阳进场",
        data: valArrMYList,
        type: "bar",
        coordinateSystem: "cartesian2d",
        yAxisIndex: 0,
        yAxisIndex: 0,
        stack: "x",
        barMinHeight: 20,
        smooth: config.value.smooth,
        emphasis: config.value.emphasis,
        label: {
          show: true,
          formatter: (item) => (item.value == 0 ? "" : item.value),
          color: commonStore.darkMode ? "#fff" : "#000",
          textBorderColor: commonStore.darkMode ? "#0006" : "#fff8",
          textBorderWidth: 1,
          textShadowColor: commonStore.darkMode ? "#000" : "#fff",
          textShadowBlur: 4,
          textShadowOffsetY: 1,
          fontSize: "14px",
          fontWeight: "bold",
          // distance: 12,
        },
        tooltip: { valueFormatter: (value, index) => value + "架/0.5H" },
        lineStyle: {
          color: commonStore.darkMode
            ? "rgba(255,255,255,0.5)"
            : "rgba(0,0,0,0.3)",
          type: "dotted",
          opacity: 1,
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: commonStore.darkMode ? "#B2819B" : "#B2819B",
            },
            {
              offset: 1,
              color: commonStore.darkMode ? "#935174" : "#935174",
            },
          ]),
          borderRadius: 10,
          borderColor: commonStore.darkMode
            ? "rgba(255,255,255,0.5)"
            : "rgba(0,0,0,0.3)",
          borderWidth: 2,
        },
        // barWidth: 50,
        // barGap: 0,
        // barCategoryGap: 0,
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
        barWidth: 60,
        barGap: 0,
        barCategoryGap: 0,
      },
      {
        name: "绵阳IGNAK/LUVEN/LADUP离场",
        data: valDepMiscMYList,
        type: "bar",
        coordinateSystem: "cartesian2d",
        yAxisIndex: 0,
        yAxisIndex: 0,
        stack: "x",
        barMinHeight: 20,
        smooth: config.value.smooth,
        emphasis: config.value.emphasis,
        label: {
          show: true,
          formatter: (item) => (item.value == 0 ? "" : item.value),
          color: commonStore.darkMode ? "#fff" : "#000",
          textBorderColor: commonStore.darkMode ? "#0006" : "#fff8",
          textBorderWidth: 1,
          textShadowColor: commonStore.darkMode ? "#000" : "#fff",
          textShadowBlur: 4,
          textShadowOffsetY: 1,
          fontSize: "14px",
          fontWeight: "bold",
          // distance: 12,
        },
        tooltip: { valueFormatter: (value, index) => value + "架/0.5H" },
        lineStyle: {
          color: commonStore.darkMode
            ? "rgba(255,255,255,0.5)"
            : "rgba(0,0,0,0.3)",
          type: "dotted",
          opacity: 1,
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: commonStore.darkMode ? "#7396B5" : "#7396B5",
            },
            {
              offset: 1,
              color: commonStore.darkMode ? "#4C7192" : "#4C7192",
            },
          ]),
          borderRadius: 10,
          borderColor: commonStore.darkMode
            ? "rgba(255,255,255,0.5)"
            : "rgba(0,0,0,0.3)",
          borderWidth: 2,
        },
        // barWidth: 50,
        // barGap: 0,
        // barCategoryGap: 0,
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
        barWidth: 60,
        barGap: 0,
        barCategoryGap: 0,
      },
      {
        name: "绵阳BOKIR/SAGPI/UBRAB离场",
        data: valDepMainMYList,
        type: "bar",
        coordinateSystem: "cartesian2d",
        yAxisIndex: 0,
        yAxisIndex: 0,
        stack: "x",
        barMinHeight: 20,
        smooth: config.value.smooth,
        emphasis: config.value.emphasis,
        label: {
          show: true,
          formatter: (item) => (item.value == 0 ? "" : item.value),
          color: commonStore.darkMode ? "#fff" : "#000",
          textBorderColor: commonStore.darkMode ? "#0006" : "#fff8",
          textBorderWidth: 1,
          textShadowColor: commonStore.darkMode ? "#000" : "#fff",
          textShadowBlur: 4,
          textShadowOffsetY: 1,
          fontSize: "14px",
          fontWeight: "bold",
          // distance: 12,
        },
        tooltip: { valueFormatter: (value, index) => value + "架/0.5H" },
        lineStyle: {
          color: commonStore.darkMode
            ? "rgba(255,255,255,0.5)"
            : "rgba(0,0,0,0.3)",
          type: "dotted",
          opacity: 1,
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: commonStore.darkMode ? "#428BFC" : "#428BFC",
            },
            {
              offset: 1,
              color: commonStore.darkMode ? "#206EE8" : "#206EE8",
            },
          ]),
          borderRadius: 10,
          borderColor: commonStore.darkMode
            ? "rgba(255,255,255,0.5)"
            : "rgba(0,0,0,0.3)",
          borderWidth: 2,
        },
        // barWidth: 50,
        // barGap: 0,
        // barCategoryGap: 0,
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
        barWidth: 60,
        barGap: 0,
        barCategoryGap: 0,
      },
      config.value.showTB
        ? {
            name: "天府BOKIR离场",
            data: dataTB,
            // data: [],
            type: "line",
            step: true,
            z: 1,
            yAxisIndex: 2,
            coordinateSystem: config.chartPolar ? "polar" : "cartesian2d",
            silent: true,
            emphasis: { disabled: true, focus: "none" },
            label: { show: false },
            tooltip: {
              valueFormatter: (value, index) =>
                `${
                  dataTB[index].halfHourException
                    ? dataTB[index].halfHourValue + "架/0.5H"
                    : ""
                }${
                  dataTB[index].halfHourException &&
                  dataTB[index].fullHourException
                    ? " | "
                    : ""
                }${
                  dataTB[index].fullHourException
                    ? dataTB[index].fullHourValue + "架/1H"
                    : ""
                }${value == 0 ? "正常" : ""}`,
            },
            lineStyle: { opacity: 0 },
            itemStyle: {
              opacity: 0,
              color: "#ff6767",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: commonStore.darkMode ? "#ff676766" : "#ff676766",
                },
                {
                  offset: 1,
                  color: commonStore.darkMode ? "#ff676700" : "#ff676700",
                },
              ]),
            },
            symbol: "none",
            animationDelay: function (idx) {
              return idx * 50 + 100;
            },
          }
        : null,
    ],
    darkMode: commonStore.darkMode,
    animationEasing: "elasticOut",
    animationDelayUpdate: function (idx) {
      return idx * 5;
    },
  };
});

// handle scrolling events
const scrollPotition = ref({
  left: 0,
  top: 0,
});

function setScrollPotition({ scrollLeft, scrollTop }) {
  scrollPotition.value.left = Math.round(scrollLeft);
  scrollPotition.value.top = Math.round(scrollTop);
  // window.console.log("generalChartScrolling:", scrollPotition.value);
}

const handleScroll = ({ scrollLeft, scrollTop }) => {
  // throttle(setScrollPotition({ scrollLeft, scrollTop }), 300, false);
  setScrollPotition({ scrollLeft, scrollTop });
};

const handleChartClick = (e) => {
  // console.log("handleChartClick", e);
  // console.log(arrangedData.value);
  let index = e.dataIndex + 5;
  let item = arrangedData.value[index];
  // console.log(item);
  let moment = item.day.format("HHmm");
  let details = item.details;
  let dataTB = arrangedDataTB.value[index];

  const style = {
    width: "320px",
    padding: "1px 12px 2px 12px",
    fontFamily: "Consolas",
    fontSize: "14px",
    display: "flex",
    justifyContent: "space-between",
    borderBottom: "1px dashed #8885",
  };

  ElMessageBox({
    title: `${moment} / ${sourceData.value.opMode}`,
    message: h("div", { style: { borderTop: "1px dashed #8888" } }, [
      ...Object.keys(details).map((k) => [
        details[k] > 0
          ? h("div", { style }, [
              h("span", null, k),
              h("span", null, details[k]),
            ])
          : null,
      ]),
      h("div", { style }, [
        h("span", null, "天府BOKIR离场0.5小时"),
        h("span", null, dataTB.halfHourValue),
      ]),
      h("div", { style }, [
        h("span", null, "天府BOKIR离场1小时"),
        h("span", null, dataTB.fullHourValue),
      ]),
    ]),
    customStyle: { width: "360px" },
    // type: "warning",
  });
};

const chartRefresh = async () => {
  // chart.value.resize();
  showChart.value = false;
  await nextTick();
  showChart.value = true;
  // setTimeout(() => {
  //   showChart.value = true;
  // }, 300);
};

const chartWidth = computed(() => arrangedData.value.length * 70 + 120);
const chartHeight = computed(() => commonStore.clientHeight - 203);

const scrollbar = ref();
const handleMouseWheel = (e) => {
  // console.log("handleMouseWheel", e);
  // scrollbar.value.setScrollLeft();
  // e.preventDefault();
  const wheelDelta = e.wheelDelta || -e.deltaY * 40;
  scrollbar.value.setScrollLeft(
    scrollbar.value.wrapRef.scrollLeft - wheelDelta
  );
};

onMounted(() => {
  window.addEventListener("resize", function () {
    chart.value ? chart.value.resize() : null;
  });
  if (!flowStore.chartConfig.customChart.chart213) {
    flowStore.chartConfig.customChart["chart213"] = {
      chartSize: 48,
      showTotal: true,
      showAdvise: false,
      showTB: true,
      modeSelect: "auto",
      tagGroup: "auto",
      smooth: false,
      lineWidth: 5,
      lineSymbolSize: 15,
      emphasis: {
        disabled: false,
        focus: "series", // "series" : "none"
      },
      labelConfig: {
        show: true,
        color: chartForeColor.value,
        fontWeight: "bold",
        fontFamily: "Consolas",
        fontSize: "14px",
      },
    };
  }
  config.value = flowStore.chartConfig.customChart.chart213;
});
</script>

<style scoped>
.command-bar {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 16px;
  overflow: hidden;
  padding: 0 32px 0 16px;
  z-index: 999;
}
</style>
